import React,{Component} from 'react';
class BindEven extends Component {
  constructor(props) {
    super(props)
    this.textInput = null;
    this.state ={
      inputMsg: '初始化',
      refInput: ''
    }
    this.title = React.createRef();
  }
  getInputData=(e)=>{
    console.log('e', e.target.value);
    this.setState({
      inputMsg: e.target.value
    })
  }
  inputClick=()=>{
    console.log('inputMsg', this.state.inputMsg)
  }
  // getInputTwoData=()=>{
  //   console.log("refInput", this.refs.refInput.value)
  //   this.setState({
  //     refInput: this.refs.refInput.value
  //   })
  // }
  inputTwoClick=()=>{
    console.log('refInput', this.state.refInput)
  }
  inputTitleClick=()=>{
    console.log('title', this.title.current)
  }
  render() {
      return (
        <div>
          <h2>第一种</h2>
          <input onChange={this.getInputData.bind()} placeholder='输入信息'/>
          <button onClick={this.inputClick.bind()}>点击我吧</button>
          <p>{ this.state.inputMsg }</p>
          <h2>第二种</h2>
          {/* <input ref="refInput" onChange={this.getInputTwoData.bind()} placeholder='输入信息'/>
          <button onClick={this.inputTwoClick.bind()}>点击我吧</button> */}

          <input ref="title" placeholder='这是title'/>
          <button onClick={this.inputTitleClick.bind()}>点击我吧</button>
          {/* <p>{ this.title }</p> */}
          <p>{ this.state.refInput}</p>
        </div>
      )
    }
}
export default BindEven